<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文字特征码转图像</title>
    <script src="./static/js/jquery.min.js" charset="utf-8"></script>
    <style>
        * {
            outline: none;
            margin: 0;
            border: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            width:100%;
            height:100%;
        }
        html{
            background-color: #C5C6C7;
        }
        .dot {
            width: 10px;
            height: 10px;
            position: absolute;
        }
        
        #text-img {
            height: 110px;
            position: relative;
            margin: 50px auto;
        }
        
        #img {
            position: absolute;
            margin: 30px auto;
        }
        
        .active {
            background-color: #000000;
        }
        
        #input-div {
            width: 300px;
            height: 50px;
            margin: 50px auto;
            position: relative;
        }
        
        #text-input {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        
        #text-input:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        }
        
        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            width: 200px;
            margin-bottom: 20px;
            margin: 20px auto;
            display: block;
        }
        
        #submit-btn {
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
        }
        #delete-btn{
            color:#fff;
            background-color: #dc1c1c;
        }
        #submit-btn:hover {
            background-color: #449d44;
            border-color: #398439;
        }
        
        #delete-btn:hover{
            background-color: #a50404;
        }
        #false-btn {
            color: #fff;
            background-color: #f0ad4e;
            border-color: #eea236;
        }
        
        #false-btn:hover {
            background-color: #ec971f;
            border-color: #d58512;
        }
        
        #img-div {
            width: 200px;
            min-height: 100px;
            margin: 30px auto;
        }
        
        #img-div img {
            width: 100%;
            height: auto;
        }
        
        select {
            margin: 20px auto;
            display: block;
        }
    </style>
</head>

<body>
    <select id="game-select">
      <option value="dn">dn</option>
      <option value="dnf">dnf</option>
      <option value="wow">wow</option>
      <option value="td">td</option>
      <option value="jx3">jx3</option>
    </select>


</body>
<script type="text/javascript">
    var hostUrl = "https://api.unique0lai.cn";

    // function HexToDotText() {
    //     this.HexText = "";
    //     this.binaryText = "";
    //     this.row = 11;
    //     this.column = 0;
    //     this.md5 = "";
    //     this.imgArr = [];
    //     this.game = "";
    //     this.imgDiv = $('<div id="img-div">')
    //     this.textImg = $('<div id="text-img">');
    //     this.textInput = $('<input type="text" id="text-input" placeholder="请输入字符">');
    //     this.submitBtn = $('<input type="button" id="submit-btn" class="btn" value="提交">');
    //     this.falseBtn = $('<input type="button" id="false-btn" class="btn" value="看不清">');
    //     this.select = $('#game-select');
    // }
    // HexToDotText.prototype = {
    //     init: function() {
    //         var _this = this;
    //         this.game = this.select.val();

    //         $('body').append(this.textImg);
    //         $('body').append(this.imgDiv);
    //         var inputDiv = $("<div id='input-div'>");
    //         inputDiv.append(this.textInput).append(this.submitBtn).append(this.falseBtn);
    //         $('body').append(inputDiv);

    //         this.submitBtn.on('click', function(e) {
    //             _this.post(true);
    //             _this.produceDotText();
    //         });
    //         this.textInput.on('keypress', function(e) {
    //             if (e.keyCode === 13) {
    //                 _this.post(true);
    //                 _this.produceDotText();
    //             }
    //         });
    //         this.falseBtn.on('click', function(e) {
    //             _this.post(false);
    //             _this.produceDotText();
    //         })
    //         this.select.on('change', function() {
    //             _this.game = _this.select.val();
    //             _this.produceDotText()
    //         })
    //     },
    //     singleSixteenToTwo: function(oneHex) {
    //         var originbinary = parseInt(oneHex, 16).toString(2);
    //         var addZeroNum = originbinary.length < 4 ? 4 - originbinary.length : 0
    //         if (addZeroNum > 0) {
    //             var zeroes = "";
    //             for (var i = 0; i < addZeroNum; i++) {
    //                 zeroes += "0";
    //             }
    //             originbinary = zeroes + originbinary;
    //         }
    //         return originbinary;
    //     },
    //     longSixteenToTwo: function() {
    //         var binaryText = "";
    //         for (var i = 0; i < this.HexText.length; i++) {
    //             binaryText += this.singleSixteenToTwo(this.HexText[i]);
    //         }
    //         this.binaryText = binaryText;

    //     },
    //     produceDotText: function() {
    //         this.game = this.select.val();
    //         this.get(); //HexText 在这里进行了设置
    //         this.longSixteenToTwo();
    //         var binaryText = this.binaryText;
    //         this.column = binaryText.length / 11;

    //         this.textImg.css('width', 10 * this.column + "px");
    //         this.textImg.empty();
    //         this.imgDiv.empty();

    //         for (var i = 0; i < this.column; i++) {
    //             for (var j = 0; j < 11; j++) {
    //                 var dot = $('<div>');
    //                 dot.addClass('dot');
    //                 if (this.binaryText[i * 11 + j] === "1") {
    //                     dot.addClass('active');
    //                 }
    //                 dot.css({
    //                     'left': i * 10 + 'px',
    //                     'top': j * 10 + 'px'
    //                 })
    //                 $('#text-img').append(dot);
    //             }
    //         }
    //         for (var i = 0; i < this.imgArr.length; i++) {
    //             this.imgDiv.append($('<img src="http://gamepic-10053455.cos.myqcloud.com/' + this.imgArr[i] + '" alt="装备名称截图">'))
    //         }
    //     },
    //     directProduce: function(HexText) {
    //         this.HexText = HexText;

    //         this.longSixteenToTwo();
    //         var binaryText = this.binaryText;
    //         this.column = binaryText.length / 11;

    //         this.textImg.css('width', 10 * this.column + "px");
    //         this.textImg.empty();
    //         this.imgDiv.empty();

    //         for (var i = 0; i < this.column; i++) {
    //             for (var j = 0; j < 11; j++) {
    //                 var dot = $('<div>');
    //                 dot.addClass('dot');
    //                 if (this.binaryText[i * 11 + j] === "1") {
    //                     dot.addClass('active');
    //                 }
    //                 dot.css({
    //                     'left': i * 10 + 'px',
    //                     'top': j * 10 + 'px'
    //                 })
    //                 $('#text-img').append(dot);
    //             }
    //         }
    //     },
    //     get: function() {
    //         var _this = this;
    //         $.ajax({
    //             url: hostUrl + '/inner_data/human_verification/',
    //             type: 'get',
    //             async: false,
    //             data: {
    //                 game: _this.game
    //             },
    //             success: function(data) {
    //                 if (!data['imagestring']) {
    //                     alert('该游戏的所有特征码已全部识别完成');
    //                 } else {
    //                     _this.HexText = data['imagestring'];
    //                     _this.imgArr = data['picture'];
    //                     _this.md5 = data['md5'];
    //                 }
    //             },
    //             error: function(data) {
    //                 console.log(data);
    //                 alert("获取点阵图片失败");
    //             }
    //         })
    //     },
    //     post: function(visibility) {
    //         var data;
    //         if (visibility) {
    //             data = {
    //                 md5: this.md5,
    //                 name: $('#text-input').val(),
    //                 visibility: visibility
    //             };
    //         } else {
    //             data = {
    //                 md5: this.md5,
    //                 visibility: visibility
    //             };
    //         }
    //         $.ajax({
    //             url: hostUrl + '/inner_data/human_verification/',
    //             type: 'post',
    //             data: data,
    //             success: function(data) {

    //             },
    //             error: function(data) {
    //                 alert("提交失败");

    //             }
    //         })
    //     }
    // };

    // var hexToDotText = new HexToDotText();
    // hexToDotText.init();
    // hexToDotText.produceDotText();

    function HumanVerify() {
        this.imgUrl = "";
        this.game = "";
        this.picname = "";
        this.imgDiv = $('<div id="img-div">');
        this.textInput = $('<input type="text" id="text-input" placeholder="请输入字符">');
        this.submitBtn = $('<input type="button" id="submit-btn" class="btn" value="提交">');
        this.deleteBtn = $('<input type="button" id="delete-btn" class="btn" value="删除">');
        // this.falseBtn = $('<input type="button" id="false-btn" class="btn" value="看不清">');
        this.select = $('#game-select');
    }
    HumanVerify.prototype = {
        init: function() {
            var _this = this;
            this.game = this.select.val();

            $('body').append(this.imgDiv);
            var inputDiv = $("<div id='input-div'>");
            inputDiv.append(this.textInput).append(this.submitBtn).append(this.deleteBtn);
            $('body').append(inputDiv);

            this.submitBtn.on('click', function(e) {
                _this.post();
            });
            this.textInput.on('keypress', function(e) {
                if (e.keyCode === 13) {
                    _this.post();
                }
            });
            this.deleteBtn.on('click',function(e){
                _this.delete();
            });
            // this.falseBtn.on('click', function(e) {
            //     _this.post(false);
            //     _this.produceDotText();
            // })
            this.select.on('change', function() {
                _this.game = _this.select.val();
                _this.get();
            })
        },
        get: function() {
            var _this = this;
            _this.imgDiv.empty();
            $.ajax({
                url: hostUrl + '/inner_data/human_verify/',
                type: 'get',
                async: false,
                data: {
                    game: _this.game
                },
                success: function(data) {
                    if (!data['picname']) {
                        alert('该游戏的所有特征码已全部识别完成');
                    } else {
                        _this.textInput.val("");
                        _this.imgUrl = data['picname'];
                        _this.picname = data['picname'];
                        _this.imgDiv.append($('<img src="http://charlib-10053455.file.myqcloud.com/'+_this.game+"/eq/" + _this.imgUrl + '" alt="装备名称截图">'))
                    }
                },
                error: function(data) {
                    console.log(data);
                    alert("获取图片失败");
                }
            })
        },
        post: function() { //还要修改
            var data;
            var _this = this;
            data = {
                game:_this.game,
                name: $('#text-input').val(),
                picname:_this.picname
            };
            $.ajax({
                url: hostUrl + '/inner_data/human_verify/',
                type: 'post',
                data: data,
                success: function(data) {
                    _this.get();
                },
                error: function(data) {
                    alert("提交失败");
                }
            })
        },
        delete: function() { //还要修改
            var data;
            var _this = this;
            data = {
                game:_this.game,
                picname:_this.picname,
                action:'delete'
            };
            $.ajax({
                url: hostUrl + '/inner_data/human_verify/',
                type: 'post',
                data: data,
                success: function(data) {
                    _this.get();
                },
                error: function(data) {
                    alert("删除失败");
                }
            })
        }
    }
    var humanVerify = new HumanVerify();
    humanVerify.init();
    humanVerify.get();
</script>

</html>